<!doctype html>
<html lang="en">
  <head>
    <title>门诊挂号 </title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

    <!-- 巨幕 -->
    <!-- b,t,l,r,x,y m margin, p padding -->
    <div class="jumbotron jumbotron-fluid mb-0">
        <div class="container">
            <h1 class="display-3">门诊挂号</h1>
        </div>
    </div>
    <!-- 导航 -->
    <nav class="breadcrumb">
        <a class="breadcrumb-item" href="index.html">首页</a>
        <a class="breadcrumb-item" href="dept.html">科室介绍</a>
        <span class="breadcrumb-item active">门诊挂号</span>
    </nav>

    <!-- 容器 -->
    <div class="container">
        <div class="row">
            <!-- 添加按钮 b4-button -->
            <button
                data-toggle="modal" 
                data-target="#modelId"
                type="button" class="mb-2 btn btn-success">新增就诊人</button>
            <!-- 对话框 b4-modal -->

            <!-- Modal -->
            <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">增加就诊人</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                        </div>
                        <div class="modal-body">
                            <!-- 输入框 b4-input -->
                            <div class="form-group">
                              <label for="">就诊人姓名</label>
                              <input type="text"
                                class="form-control" name="" id="" aria-describedby="helpId" placeholder="姓名">
                            </div>
                            <!-- 输入框 -->
                            <div class="form-group">
                              <label for="">身份证</label>
                              <input type="text"
                                class="form-control" name="" id="" aria-describedby="helpId" placeholder="身份证号码">
                            </div>
                            <!-- 下拉列表 b4-select -->
                            <div class="form-group">
                              <label for="">类型</label>
                              <select class="form-control" name="" id="">
                                <option>儿童</option>
                                <option>成年人</option>
                                <option>老年人</option>
                              </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">增加</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- 表格 -->
            <table class="table">
                <thead class="thead-dark text-center">
                    <tr>
                        <th style="width: 32px;">
                            <input type="checkbox" name="" id="">
                        </th>
                        <th>姓名</th>
                        <th>身份证号</th>
                        <th style="width:30%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>小王</td>
                        <td>320000200109102222</td>
                        <td>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-warning btn-sm btn-block">编辑</button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-danger btn-sm btn-block">删除</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>小王</td>
                        <td>320000200109102222</td>
                        <td>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-warning btn-sm btn-block">编辑</button>

                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-danger btn-sm btn-block">删除</button>
                                    
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>小王</td>
                        <td>320000200109102222</td>
                        <td>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-warning btn-sm btn-block">编辑</button>

                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-danger btn-sm btn-block">删除</button>
                                    
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>小王</td>
                        <td>320000200109102222</td>
                        <td>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-warning btn-sm btn-block">编辑</button>

                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-danger btn-sm btn-block">删除</button>
                                    
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页 pag -->
        <!-- 组件库：预定义的、可复用的功能单元 -->
        <nav aria-label="Page navigation">
          <ul class="pagination justify-content-center">
            <li class="page-item disabled">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">下一页</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
        </nav>
        <div class="row">
        </div>
    </div>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>